<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
      <Echart
              id="rightTop"
              :options="option"
              class="right_top_inner"
              v-if="pageflag"
              ref="charts"
      />

    <Reacquire v-else @onclick="getData" style="line-height: 200px">
        重新获取
    </Reacquire>
</template>

<script>
import {currentGET} from "api/modules";
import {graphic} from "echarts"

export default {
    data() {
        return {
            option: {},
            pageflag: true,
            timer: null,

        }
    },
    created() {
        this.getData();
    },

    mounted() {

    },

    methods: {

        getData() {

            currentGET("rightTop",{}).then((res) => {

              if (res.code ==200) {
                  console.log('左上饼图成功',res.data)
                  this.initData(res.data);
              } else {
                this.pageflag = false;
              }
            });

           

        },
        initData(dataInit){

            console.log('dataInit',dataInit)
            this.option={
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    data: [
                        dataInit[2].name,
                        dataInit[3].name,
                    ],
                    textStyle: {
                        color: '#ffffff',
                    }
                },

                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        itemStyle: {
                            borderRadius: 8,
                            borderColor: 'rgba(255,255,255,0)',
                            borderWidth: 4
                        },
                        selectedMode: 'single',
                        radius: [0, '40%'],
                        label: {
                            position: 'inner',
                            fontSize: 14
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: dataInit[0].value, name: dataInit[0].name},
                            { value: dataInit[1].value, name: dataInit[1].name,label:{color:'#ecf6ff',fontWeight: 'bold', } ,itemStyle:{color:'#9043af',} },

                        ]
                    },
                    {
                        name: 'Access From',
                        type: 'pie',
                        itemStyle: {
                            borderRadius: 4,
                            borderColor: 'rgba(255,255,255,0)',
                            borderWidth: 4,
                        },

                        radius: ['55%', '70%'],
                        labelLine: {
                            length: 30
                        },
                        label: {
                            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}',
                            backgroundColor: '#F6F8FC',
                            borderColor: '#8C8D8E',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: '#6E7079',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#8C8D8E',
                                    width: '100%',
                                    borderWidth: 1,
                                    height: 0
                                },
                                b: {
                                    color: '#4C5058',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#fff',
                                    backgroundColor: '#4C5058',
                                    padding: [3, 4],
                                    borderRadius: 4
                                }
                            }
                        },
                        data: [
                            { value: dataInit[2].value, name: dataInit[2].name,itemStyle:{color:'#9939d0',}  },
                            { value: dataInit[3].value, name: dataInit[3].name,itemStyle:{color:'#4381d2',} }
                        ]
                    }
                ]
            }
            this.pageflag = true;
        }

    },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>